<template>
    <div class="item">
        <Tips :msg="tipsMsg" v-show="isShow"/>
        <div class="itemcontent">
            <div class="textcontent" @click = 'goDetails(item)'>
                <div class="name">{{item.name}}</div>
                <div class="content">{{item.content}}</div>
                <div class="time">{{item.addTime}}</div>
            </div>
        </div>

        <div class="icon">
            <div class="iconitem" >
                <i class="iconfont icon-shoucang" @click="addCollection(item)" :class="isCollections ? 'active' : '' "></i>
                <p>{{item.collect}}</p>
            </div>
            <div class="iconitem">
                <i class="iconfont icon-dianzan" @click="addGiveup(item)" :class="isGiveup ? 'active' : '' "></i>
                <p>{{item.giveup}}</p>
            </div>
            <div class="iconitem">
                <i class="iconfont icon-icon-"></i>
                <p>{{item.look}}</p>
            </div>
            
        </div>

    </div>
</template>

<script>
    import Tips from '@/components/Tips'
    import {mapState} from 'vuex'
    export default {
        name:"HomeItem",
        props:['item','userCommentList','userCollectList'],
        components:{
            Tips
        },
        data(){
            return {
                isCollections:false,
                isGiveup:false,
                isShow:false,
                tipsMsg:"",
            }
        },
        computed:{
            ...mapState('Home',['arouthInfo','PostsInfo'])
        },
        methods: {
            // 这个位置发送两个请求，获取作者信息和该数据的信息  之后将其作为路由传输传递给详情页
            goDetails(item){
                this.$store.dispatch('Home/getPostsInfo',item._id)
                this.$store.dispatch('Home/getArouth',item.arouth)
                // 增加浏览量
                this.$store.dispatch('Home/addLook',item._id)
                setTimeout(()=>{
                    this.$set(this.PostsInfo,'arouthName',this.arouthInfo)
                    this.$router.push({
                            path:'/blogDetails',
                            query:this.PostsInfo
                    })
                },100)
            },

            // 更新数据的方法
            getNewData(){
                setTimeout(()=>{
                    this.$store.dispatch('Home/getHomeDate',sessionStorage.getItem('indexText') || '推荐')
                },50)
            },

            // 添加收藏
            addCollection(item){
                const type = '收藏'
                const user = sessionStorage.getItem('user')
                if(user){
                    // 未添加
                    if(this.isCollections === false){
                        // 收藏数据到用户数组中
                        this.$store.dispatch('Home/addCollection',{type,item})
                        this.isCollections = true
                        // 设置提示
                        this.tipsMsg = '收藏成功！'
                        this.isShow = true
                        setTimeout(()=>{
                            this.tipsMsg = ''
                            this.isShow = false
                        },1000)
                        // 增加收藏数量
                        this.$store.dispatch('Home/addCollectOrCommentNum',{type,item})
                        // 更新數據
                        this.getNewData()

                    }else if(this.isCollections === true){
                        const info = {item,type}
                        // 执行删除操作
                        this.$store.dispatch('Home/removeCollectionOrComment',info)
                        this.isCollections = false
                        // 设置提示
                        this.tipsMsg = '取消收藏成功!'
                        this.isShow = true
                        setTimeout(()=>{
                            this.tipsMsg = ''
                            this.isShow = false
                        },1000)

                        this.$store.dispatch('Home/removeCollectOrCommentNum',info)
                        this.getNewData()
                    }
                }
                else{
                    this.tipsMsg = '登陆后才可以执行此操作哦！'
                    this.isShow = true
                    setTimeout(()=>{
                        this.tipsMsg = ''
                        this.isShow = false
                    },1000)
                }
            },

            // 添加点赞
            addGiveup(item){
                const type = '点赞'
                const user = sessionStorage.getItem('user')
                if(user){
                    if(this.isGiveup === false){
                        // 将数据添加到用户数组中
                        this.$store.dispatch('Home/addCollection',{type,item})
                        this.isGiveup = true
                        // 设置提示
                        this.tipsMsg = '点赞成功！'
                        this.isShow = true
                        setTimeout(()=>{
                            this.tipsMsg = ''
                            this.isShow = false
                        },1000)
                        // 增加收藏数量
                        this.$store.dispatch('Home/addCollectOrCommentNum',{type,item})
                        // // 更新數據
                        this.getNewData()

                    }
                    else if(this.isGiveup === true){
                        const info = {item,type}
                        // 执行删除操作
                        this.$store.dispatch('Home/removeCollectionOrComment',info)
                        this.isGiveup = false
                        // 设置提示
                        this.tipsMsg = '取消点赞成功!'
                        this.isShow = true
                        setTimeout(()=>{
                            this.tipsMsg = ''
                            this.isShow = false
                        },1000)

                        this.$store.dispatch('Home/removeCollectOrCommentNum',info)
                        this.getNewData()
                    }
                }else{
                    this.tipsMsg = '登陆后才可以执行此操作哦！'
                    this.isShow = true
                    setTimeout(()=>{
                        this.tipsMsg = ''
                        this.isShow = false
                    },1000)
                }
            }
        },
        mounted() {
            // 校验该用户是否保存了数据
           setTimeout(()=>{
                this.userCollectList.forEach(collect=>{
                    if(collect._id == this.item._id){
                        this.isCollections = true
                    }
                })
           },50)
           setTimeout(()=>{
                this.userCommentList.forEach(collect=>{
                    if(collect._id == this.item._id){
                        this.isGiveup = true
                    }
                })
           },50)
        },
    }
</script>

<style scoped lang="less">
    .item{
        width: 32%;
        height: 16.3vw;
        padding: 0.8vw 0;
        background: #fff;
        margin-bottom: 2vw;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &:hover{
            box-shadow: 0 0 10px 10px rgba(51, 51, 51, 0.075);
        }

        .itemcontent{
            display: flex;
            justify-content: space-between;
            padding: 0 1.3vw;

            .textcontent{
                width: 100%;

                .name{
                    width: 100%;
                    font-size: 1.4vw;
                    margin-bottom: 15px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap; 
                    color: rgb(73, 73, 73);
                }

                .content{
                    color: rgb(145, 145, 145);
                    width: 100%;
                    overflow: hidden;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 5;
                    -webkit-box-orient: vertical;
                }

                .time{
                    margin-top: 0.7vw;
                    font-size: 0.8vw;
                    color: rgb(207, 72, 72);
                }
            }
        }

        .icon{
            height: 3.5vw;
            border-top: 0.1vw solid rgb(226, 226, 226);
            display: flex;
            justify-content: space-around;
            align-items: center;
            

            .iconitem{
                margin-top: 0.8vw;
                text-align: center;
            }

            img{
                width: 1.6vw;
                height: 1.6vw;
                
            }

            p{
                font-size: 0.8vw;
                color: rgb(78, 78, 78);
                
            }

            .active{
                color: #D81E06;
            }
        }
    }
</style>